<template>
    <el-dialog v-model="data.open" :title="data.title" width="800px" draggable align-center>
        <el-form :model="formData" label-width="120px" :inline="true" :rules="rules" ref="form">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="组织名称" prop="name">
                        <el-input class="el-form-width-all" v-model="formData.name" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="组织代码">
                        <el-input class="el-form-width-all" v-model="formData.code" clearable />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="组织类型">
                        <el-select class="el-form-width-all" v-model="formData.type" placeholder="请选择组织类型" clearable>
                            <el-option v-for = "item in orgType" :label="item.text" :value="item.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="上级组织">
                        <el-tree-select class="el-form-width-all" v-model="formData.parentId" :data="orgTreeData"
                            :render-after-expand="false" check-strictly clearable />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="组织负责人">
                        <el-input class="el-form-width-all" v-model="formData.leaderId" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="组织简称">
                        <el-input class="el-form-width-all" v-model="formData.shortName" clearable />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="组织状态">
                        <el-switch v-model="formData.status" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24" ref="descBox">
                    <el-form-item label="组织描述">
                        <el-input v-model="formData.desc" :rows="4" type="textarea" placeholder="请输入组织描述"
                             />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="confirm(form)">确定</el-button>
                <el-button @click="cancel">取消</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup lang = "ts">
import type { TableSelectOne } from '@/assets/js/utils/entity/TableCardType';
import type { VOrgManagement } from '@/assets/js/vo/organization/orgManagement/VOrgManagement';
import { ElMessage, type FormInstance, type FormRules } from 'element-plus';
import { onMounted, reactive, ref } from 'vue';
import { getOrgById, saveOrg } from '@/api/organization/orgManagement/index'
import type { HttpResponse } from '@/assets/js/utils/entity/HttpResponse';
import { getCodesByGroup } from '@/api/base';

const props = defineProps<{
    data: TableSelectOne
}>()

let formData = reactive<VOrgManagement>({
    id: props.data.id ?? null,
    name: ''
})

const form = ref()

const orgTreeData = reactive([])

const orgType = ref<any[]>([])

const getCodeItems = async () => {
    const res = await getCodesByGroup('ORGANIZATION_TYPE') as unknown as HttpResponse
    if (res.ok) {
        const items = res.data
        orgType.value = [...items]
    }
}

const getData = async () => {
    if (props.data.id !== null) {
        const res = await getOrgById(props.data.id as string) as unknown as HttpResponse<VOrgManagement>
        if (res.ok) {
            const data = res.data as VOrgManagement
            formData.name = data.name
            formData.code = data.code
            formData.type = data.type
            formData.parentId = data.parentId
            formData.shortName = data.shortName
            formData.leaderId = data.leaderId
            formData.status = data.status
            formData.desc = data.desc
        }
    }
}

const confirm = (form: FormInstance | undefined) => {
    if (!form) return
    form.validate(async (valid, fields) => {
        if (valid) {
            const res = await saveOrg(formData) as unknown as HttpResponse
            if (res.ok) {
                props.data.open = false
                ElMessage.success({
                    message: '保存成功',
                    type: 'success'
                })
                if (props.data.callback) {
                    props.data.callback()
                }
            }
        } else {
            console.log('error submit!', fields)
        }
    })
}
const cancel = () => {
    props.data.open = false
}
const rules = reactive<FormRules>({

})

onMounted(() => {
    getCodeItems()
    getData()
})
</script>

<style lang = "less" scoped></style>